<script setup lang="ts">
import { ref, defineEmits } from 'vue'
// 子调父
const emit = defineEmits<{
  (event: 'close'): void
}>()

const multiArray = ref([
  ['选项一', '选项二', '选项三'],
  ['子项一', '子项二', '子项三'],
])
const multiIndex = ref([0, 0])
const bindMultiPickerColumnChange = (e: any) => {
  console.log('picker bindMultiPickerColumnChange发送选择改变，携带值为', e)
  multiIndex.value[e.detail.column] = e.detail.value
}
const onCancel = (e: any) => {
  console.log('picker cancel发送取消事件', e)
}
</script>

<template>
  <view class="discount-panel">
    <view class="header"
      ><text class="title">使用优惠券</text>
      <text class="iconfont icon-close" @tap="emit('close')"></text
    ></view>
    <view class="coupon-list">
      <picker
        mode="multiSelector"
        @columnchange="bindMultiPickerColumnChange"
        @cancel="onCancel"
        :value="multiIndex"
        :range="multiArray"
      >
        <view class="uni-input"
          >{{ multiArray[0][multiIndex[0]] }}，{{ multiArray[1][multiIndex[1]] }}</view
        >
      </picker>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
.discount-panel {
  padding: 0 32rpx;
  border-radius: 24rpx 24rpx 0 0;
  position: relative;
  background-color: #fff;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32rpx;
    margin-bottom: 32rpx;
    line-height: 60rpx;
    .title {
      font-size: $font-medium-size;
      color: $good-font-title-color;
      font-weight: $font-medium-weight;
    }
    .iconfont {
      color: $good-font-title-color;
      font-size: 50rpx;
    }
  }
  .coupon-list {
    .coupon-item {
      padding: $medium-padding;
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;
      background-color: #fff;
      border-radius: $border-lager-radius;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

      .coupon-item-title {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        border-right: 1px solid #f0f0f0;
        align-items: center;

        .price {
          font-size: 60rpx;
          color: #ff4444;
          font-weight: $font-bold-weight;
        }

        .desc {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #6b7280;
          font-weight: $font-regular-weight;
        }
      }

      .coupon-item-content {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 30rpx;

        .title {
          font-size: $font-medium-size;
          font-weight: $font-medium-weight;
          color: #000;
        }

        .time {
          font-size: $font-small-size;
          color: #6b7280;
          font-weight: $font-medium-weight;
        }
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          color: $color;
          font-size: 50rpx;
          &.icon-gouxuan3 {
            color: #6b7280;
          }
        }
      }
    }
  }
}
</style>
